
<template>
	<el-card class="box-card">
		<ul class="msg-box">
			<li>
				<h4>我要充值</h4>
			</li>
			<li>
				<h4 style="margin-bottom: 15px;">会员充值</h4>
				<el-radio-group v-model="amountVal" @change="amountChange">
					<el-radio border :label="''+ 20">一个月</el-radio>
					<el-radio border :label="''+ 50">三个月</el-radio>
					<el-radio border :label="''+ 100">六个个月</el-radio>
					<el-radio border :label="''+ 150">一年</el-radio>
				</el-radio-group>
			</li>
			<li>
				<h4 style="margin-bottom: 15px;">充值方式</h4>
				<el-radio-group v-model="rechargeParams.paymentType" @change="paymentTypeChange">
					<el-radio border :label="''+ 0">微信</el-radio>
					<el-radio border :label="''+ 1">支付宝</el-radio>
				</el-radio-group>
			</li>
			<li>
				<h4 style="margin-bottom: 15px;">充值金额</h4>
				<el-input  disabled="false" clearable v-model="rechargeParams.totalAmt" placeholder="请输入金额" style="width: 150px;"></el-input>
			</li>
		</ul>
		<div style="text-align: center; margin-top: 30px;">
			<el-button type="primary" @click="surePay">确认支付</el-button>
		</div>
	</el-card>
</template>
 
<script>
	export default {
		data() {
			return {
				amountVal: '',
				disabled: false,
				//充值参数
				rechargeParams: {
					"totalAmt": '', //金额
					"paymentType": "0", //支付方式[0:微信,1:支付宝,2:余额,3:活动]
					"transType": "0" //交易类型[0:充值,1:消费]
				}
			}
		},
		methods: {
			//充值金额
			amountChange(val) {
				this.rechargeParams.totalAmt = val;
				if (val == '') {
					this.disabled = false
				} else {
					this.disabled = true
				}
			},
			//支付方式
			paymentTypeChange(val) {
				this.rechargeParams.paymentType = val
			},
			//确认支付
			async surePay() {
				if (this.rechargeParams.totalAmt == '') {
					this.$message.warning('请输入金额');
					return;
                }
                localStorage.setItem("vip", true);
				this.$store.state.vip=true;
				this.$message('充值成功');
                this.$router.push('/')

            }
		}
	}
</script>
 
<style scoped>
	/* 信息列表样式 */
	.msg-box > li {
		list-style: none;
		border-bottom: 1px solid #c5c5c5;
		padding: 20px 10px;
	}
</style>